<template>
    <div class="simulation-table">
      <el-row style="margin-top: -25px">
        <el-button type="text" @click="selectAll">全选</el-button>
        <el-button type="text" @click="clearSelect">取消</el-button>
        <el-checkbox-group v-model="checkedTitle" @change="handleCheckedTitleChange">
          <el-col :span="4" v-for="(title,index) in this.titles" :key=index style="margin-top: 10px">
              <el-checkbox
                  :label=index
                  :key=index
              >{{title}}</el-checkbox>
          </el-col>
          <!-- <el-checkbox v-for="(title,index) in this.titles" :label=index :key=index>{{title}}</el-checkbox> -->
        </el-checkbox-group>
      </el-row>
      <el-row style="text-align: center; margin-top: 30px" >
        <el-button type="primary" size="small" @click="saveConfirm()" >确定</el-button>
        <el-button type="primary" size="small" @click="cancelConfirmVehicleLine">取消</el-button>
      </el-row>
  </div>
</template>

<script>
  export default {
    props: ['titles'],
    data: function () {
      return {
        fullscreenLoading: false,
        hackReset: true,
        checkedTitle: [],
        export: {
        },
        confirmRules: {
        }
      }
    },
    methods: {
      selectAll () {
        this.checkedTitle = []
        if (this.titles && this.titles.length > 0) {
          for (let i = 0; i < this.titles.length; i++) {
            this.checkedTitle.push(i)
          }
        }
      },
      clearSelect () {
        this.checkedTitle = []
      },
      saveConfirm () {
        if (this.checkedTitle.length === 0) {
          this.$notify({
            title: '提示',
            message: '请选择需要导出的字段',
            type: 'warning'
          })
        } else {
          this.$emit('listenSon', this.checkedTitle)
        }
      },
      handleCheckedTitleChange (value) {
        this.checkedTitle = value
      },
      cancelConfirmVehicleLine () {
        this.$emit('noHandle')
      }
    },
    mounted () {
    }
  }
</script>
<style scoped>
  .app-container .row-title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px
  }

  .app-container .row-title h2 {
    color: #409eff;
    font-size: 16px;
    line-height: 16px;
    font-weight: bolder;
    border-left: 2px solid #409eff;
    padding-left: 16px;
    margin: 8px 16px 8px 0
  }
</style>
